<template>
  <div id="buycart">
    <div class="tips">
      <span>30天无理由退换</span>
      <span>48小时极速退款</span>
      <span>满88元免邮费</span>
    </div>

    <div class="item" v-for="(item, index) in cartList" :key="index">
      <van-checkbox
        v-model="item.checked"
        @change="checkEvent($event, item)"
      ></van-checkbox>
      <van-image
        class="img"
        width="70"
        height="70"
        lazy-load
        :src="item.list_pic_url"
      />
      <div class="briefPro">
        <div class="title">
          <span>{{ item.goods_name }}</span>
          <span>×{{ item.number }}</span>
        </div>
        <div class="brief">{{ item.goods_specifition_name_value }}</div>
        <p class="price">￥{{ item.retail_price }}</p>
      </div>
    </div>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
    >
      <van-checkbox v-model="checkedAll" @change="statusEvent($event)"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
let mapStateObj = mapState(["cartList", "cartTotal"]);
export default {
  data() {
    return {

    };
  },
  computed: {
    checkedAll:{
            set(val){
                console.log(val,'设置全选')
            },
            get(){
                if(this.cartTotal.goodsCount==this.cartTotal.checkedGoodsCount){
                    return true;
                }else{
                    return false;
                }
            }
        },
    ...mapStateObj,
  },
  created() {
    this.$store.dispatch("AjaxCart");
  },
  mounted() {
    console.log(this.cartList);
  },
  methods: {
    checkEvent: async function (event, item) {
      //console.log(item)
      let res = await axios.post(this.$root.api.CartChecked, {
        productIds: item.product_id,
        isChecked: Number(event),
      });
      this.$store.commit("setCartList", res.data.data.cartList);
      this.$store.commit("setCartTotal", res.data.data.cartTotal);
      console.log(res);
      
      //  this.cartList.forEach((item,index) => {
      //     if(item.checked != true){
      //       this.checked = false
      //     } 
      //   });

    },
    statusEvent: function (event) {
      console.log(event + 111);
      // if (event) {
      //   this.cartList.forEach((item) => {
      //     item.checked = true;
      //   });
      // } else {
      //   this.cartList.forEach((item) => {
      //     item.checked = false;
      //   });
      // }
    },
  },
};
</script>

<style lang="less" scoped>
#buycart {
  .tips {
    font-size: 10px;
    color: #ccc;
    display: flex;
    justify-content: space-around;
    height: 20px;
    line-height: 20px;
    background-color: #eee;

    span {
      position: relative;
    }

    span::before {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      border: 1px solid red;
      border-radius: 2px;
      top: 7px;
      left: -10px;
    }
  }

  .item {
    display: flex;
    padding: 10px 10px;

    .img {
      margin: 0 10px;
      background-color: #eee;
    }

    .briefPro {
      display: flex;
      text-align: left;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      font-size: 14px;
      .title {
        display: flex;
        justify-content: space-between;
      }
      .brief {
        font-size: 12px;
        color: #ccc;
      }
      .price {
        color: lightcoral;
        font-size: 13px;
        font-weight: 600;
      }
    }
  }
}
</style>